:root {
    --primary-color: #3C5667;
    --secondary-color: #C32B09;
    --tertiary-color: #012C50;

    --other-color-1: #6633CC;
    --other-color-2: #E0701E;
    --other-color-3: #FFA11B;
    --other-color-4: #2D717C;
    --other-color-5: #0B8578;
    --other-color-6: #F56B0F;
    --other-color-7: #E22C2C;
    --other-color-8: #E53F40;
    --other-color-9: #A8B7C7;

    --gray-scale-1: #FFFFFF;
    --gray-scale-2: #F2F2F2;
    --gray-scale-3: #E5E5E5;
    --gray-scale-4: #CCCCCC;
    --gray-scale-5: #B2B2B2;
    --gray-scale-6: #8A8A8A;
    --gray-scale-7: #4A4A4A;
    --gray-scale-8: #191A1A;

    --font-xs-size: 12px;
    --font-s-size: 14px;
    --font-m-size: 16px;
    --font-l-size: 20px;

    --text-color: #434343;

    --border-radius: 4px;

    --input-label-color: #E8F6FE;
}

.sheets-nested-form, .sheets-nested-form:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

#sheets_form_builder .loader-modal {
    background-color: var(--gray-scale-1);
}

#sheets_form_builder .loader-modal .loader-modal-spinner {
    background-color: var(--primary-color) !important;
}

#sheets_form_builder .form-border{
    padding-left: 20px;
    padding-right: 20px;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

#sheets_form_builder ul#progress li.progress-number:first-child:after {
    left: 90px;
}

#sheets_form_builder ul#progress li.progress-number:last-child:after {
    left: -80px;
}

#sheets_form_builder ul#progress li.progress-number:before {
    border: solid 1px var(--secondary-color) !important;
    background: var(--secondary-color) !important;
}

#sheets_form_builder ul#progress li.progress-number:not(.active):not(.checked):before {
    color: var(--gray-scale-7) !important;
    background: var(--gray-scale-3) !important;
    border-color: var(--gray-scale-3) !important;
    font-weight: 700;
}

#progress li.active:before, #progress li.active:after {
    background: var(--secondary-color) !important;
    border: solid 1px var(--secondary-color) !important;
}

#progress li.active:before, #progress li.checked:before, #progress li.checked:after{
    background: var(--secondary-color) !important;
    border: solid 1px var(--secondary-color) !important;
}

#progress li.active:before, #progress li.errors-fields:before, #progress li.errors-fields:after{
    background: var(--gray-scale-3) !important;
    border: solid 1px var(--gray-scale-3) !important;
}

#sheets_form_builder div.wrapper div.number {
    color: var(--gray-scale-1);
    border: solid 2px var(--primary-color) !important;
    background: var(--gray-scale-3) !important;
}

#sheets_form_builder div.wrapper div.number:not(.active) {
    color: var(--gray-scale-3);
    border: solid 2px var(--primary-color) !important;
    background: var(--gray-scale-1) !important;
}

#sheets_form_builder div.wrapper div.step div.info p.title {
    color: var(--secondary-gray-900-color) !important;
    font-size: 14px;
}

#sheets_form_builder div.wrapper div.step:after {
    background: var(--primary-color) !important;
}

#sheets_form_builder div.wrapper div.active {
    background: var(--primary-color) !important;
}

#sheets_form_builder .btn.btn-secondary {
    color: var(--gray-scale-1) !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

#sheets_form_builder .btn.btn-secondary:disabled {
    color: var(--gray-scale-5) !important;
    background-color: var(--gray-scale-3) !important;
    border-color: var(--gray-scale-3) !important;
}

#sheets_form_builder .btn.btn-success {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

#sheets_form_builder .btn.btn-success:disabled {
    color: var(--gray-scale-3) !important;
    background-color: var(--gray-scale-4) !important;
    border-color: var(--gray-scale-4) !important;
}

#sheets_form_builder .btn.btn-block.btn-secondary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

h3.sheets-row-title {
    font-size: 20px;
}

.close {
    float: right;
    font-size: 1.35rem;
    font-weight: 100;
    line-height: 1;
    color: var(--primary-color);
    text-shadow: 0 1px 0 var(--gray-scale-1);
    opacity: 0.5;
}

.close:hover {
    color: var(--primary-color-2);
}


.sheets-form-title {
    color: var(--gray-scale-6);
    text-align: center;
    font-style: normal;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

.sheets-row-title {
    color: var(--tertiary-color);
    font-style: normal;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 0px 5px !important;
}

.btn-primary {
    color: var(--gray-scale-1);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    color: var(--gray-scale-1);
    background-color: var(--primary-color-3);
    border-color: var(--primary-color-3);
}

.custom-file-label {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--input-label-color) !important;
    background: var(--input-label-color) !important;
}

.custom-file-label::after {
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: var(--tertiary-color) !important;
    content: "\f0fe";
    background: var(--input-label-color) !important;
    border-left: none !important;
    border-radius: 0 0.25rem 0.25rem 0;
}

input:focus + label {
    outline: 1px solid var(--gray-scale-4) !important;
}

input[type=checkbox] {
    accent-color: var(--tertiary-color) !important;
}